<template>
  <div class="flex items-center gap-5px mb-6px">
    <div class="animate-dot h-6px w-6px bg-fog-24 rounded-4px relative"></div>
    <span class="text-12px text-text-3">{{ $t("title") }}</span>
  </div>
  <div class="win-list scrollbar-hidden bg-fog-1">
    <div class="win-list__item">
      <div class="item-right">
        <img
          src="https://bc.imgix.net/game/image/6341e853-7981-4a9d-91cb-0e5f09fca749.png"
          alt=""
        />
        <span>cicicibelklo</span>
      </div>
      <div class="item-left">
        <span class="mr-10px text-12px flex item-center gap-4px">
          ¥677,967
          <img src="https://bc.game/coin/USD.black.png" class="h-12px" alt="" />
        </span>
        <van-icon name="arrow" size="12px" />
      </div>
    </div>
    <div class="win-list__item">
      <div class="item-right">
        <img
          src="https://bc.imgix.net/game/image/962f58da-ef5b-4393-ab85-d86464684205.png"
          alt=""
        />
        <span>puregasdon fb</span>
      </div>
      <div class="item-left">
        <span class="mr-10px text-12px flex item-center gap-4px">
          ¥131,677,967
          <img src="https://bc.game/coin/USD.black.png" class="h-12px" alt="" />
        </span>
        <van-icon name="arrow" size="12px" />
      </div>
    </div>
    <div class="win-list__item">
      <div class="item-right">
        <img
          src="https://bc.imgix.net/game/image/eb557ede-b7cd-44e4-b52f-05e68c0048b5.png"
          alt=""
        />
        <span>pasdkasd</span>
      </div>
      <div class="item-left">
        <span class="mr-10px text-12px flex item-center gap-4px">
          ¥4,121,677,967
          <img src="https://bc.game/coin/USD.black.png" class="h-12px" alt="" />
        </span>
        <van-icon name="arrow" size="12px" />
      </div>
    </div>
    <div class="win-list__item">
      <div class="item-right">
        <img
          src="https://bc.imgix.net/game/image/db38b4ba-8b5b-4bee-b0f0-f1ebb10b3ee4.png"
          alt=""
        />
        <span>*****</span>
      </div>
      <div class="item-left">
        <span class="mr-10px text-12px flex item-center gap-4px">
          ¥1,677,967
          <img src="https://bc.game/coin/USD.black.png" class="h-12px" alt="" />
        </span>
        <van-icon name="arrow" size="12px" />
      </div>
    </div>
    <div class="win-list__item">
      <div class="item-right">
        <img
          src="https://bc.imgix.net/game/image/e19bc12a-9c79-4ef5-9d33-9222c40fe067.png"
          alt=""
        />
        <span>****</span>
      </div>
      <div class="item-left">
        <span class="mr-10px text-12px flex item-center gap-4px">
          ¥4,677,967
          <img src="https://bc.game/coin/USD.black.png" class="h-12px" alt="" />
        </span>
        <van-icon name="arrow" size="12px" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const $t = key => {
  return t("home.win_list." + key);
};
</script>

<style lang="less" scoped>
.win-list {
  color: #98a7b5;
  padding: 6px;
  border-radius: 4px;
  height: 125px;
  overflow: hidden;
  position: relative;
  &::after {
    content: "";
    height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--fog-26);
    pointer-events: none;
  }
  &__item {
    margin-bottom: 6px;
    height: 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:last-child {
      margin: 0;
    }
    .item-right {
      display: flex;
      align-items: center;
      font-size: 12px;
      > img {
        height: 34px;
        width: 34px;
        border-radius: 4px;
        margin-right: 6px;
      }
    }
    .item-left {
      display: flex;
      align-items: center;
      > span {
        color: #3bc117;
      }
    }
  }
}
.animate-dot {
  &::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    // transform: translate(-50%, -50%);
    margin-top: -3px;
    margin-left: -3px;
    background-color: var(--fog-25);
    animation: sun infinite 1s linear;
  }
}

@keyframes sun {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2.5);
  }
}
</style>
